<template>
	<view class="admin">
		<view class="top">
			<view class="search">
				<input style="border: 1px solid #c0c4cc;border-radius: 40rpx;padding: 10rpx;background-color: #f2f2f2;"
					type="text" placeholder-style="color:#c0c4cc" placeholder="请输入型号搜索" @input="input" />
			</view>

			<view class="option">
				<view @click="optionClick(item.i)" v-for="(item,index) in option" :key="index"
					style="height: 80rpx;line-height: 80rpx;" :class="item.i == optionI?'nagetive':'nage'">
					{{item.name}}
				</view>
			</view>
		</view>

		<view class="bottom">
			<!-- 订单详情 -->
			<view v-for="(item,index) in order" :key="index" class="order">
				<view>
					<!-- 订单信息 -->
					<view
						style="display: flex;justify-content: space-between;align-items: center;padding: 10rpx 20rpx;border-bottom: 1px solid #ccc;font-size: 20rpx;">
						<text>订单号:{{item.orderNo}}</text>
						<text>委托方:{{item.client}}</text>
					</view>

					<view
						style="display: flex;justify-content: space-between;align-items: center;padding: 10rpx 20rpx;border-bottom: 1px solid #ccc;font-size: 20rpx;">
						<text>型号:{{item.model}}</text><text>订单金额:￥{{item.total}}</text>
					</view>

					<!-- <view
						style="display: flex;justify-content: space-between;align-items: center;padding: 10rpx 20rpx;border-bottom: 1px solid #ccc;font-size: 20rpx;">
						
						<view style="display: flex;align-items: center;">
							<text>测评人：</text>
							<u--input border="surround" v-model="item.checkName" :disabled="item.isCheckName">
							</u--input>
						</view>

						<view style="display: flex;align-items: center;">
							<view v-for="(it,ind) in radiolist" @click="copClick(item,ind)" :key="ind"
								class="radiolist" :class="{ 'active': (item.checkState == ind)&&(item.checkState == 1), 'activeRed': (item.checkState == ind)&&(item.checkState == 0) }">{{it}}</view>
						</view>
						
						<view style="display: flex;align-items: center;font-size: 20rpx;padding: 0rpx 20rpx;">
							<view>确认检测：</view>
							<view>
								<u-switch v-model="item.isCheckName" :disabled="item.isCheckName" asyncChange
									@change="asyncChange(item)" activeColor="#3953b8">
								</u-switch>
							</view>
						</view>

					</view> -->

					<u-row>
						<u-col span="6">
							<view style="font-size: 20rpx;">
								创建时间:{{item.createTime}}
							</view>
						</u-col>
						<u-col span="3">
							<view>
								<u-button text="详情" @click="openClick(item)"></u-button>
							</view>
						</u-col>
						<u-col span="3">
							<view>
								<u-button text="评论" @click="commentClick(item)"></u-button>
							</view>
						</u-col>
					</u-row>

					<!-- <u-cell-group>
						<u-cell title="订单编号:" :value="item.orderNo"></u-cell>
						<u-cell title="委托方:" :value="item.client"></u-cell>
						<u-cell title="型号:" :value="item.model"></u-cell>
						<u-cell title="创建时间:" :value="item.createTime"></u-cell>
						<u-cell title="订单金额:" :value="'￥' + item.total"></u-cell>
					</u-cell-group> -->

					<!-- <u-row
						customStyle="margin: 10rpx 0;padding: 0 20rpx;display: flex;justify-content: space-around;align-items: center;">
						<view>测评人：</view>
						<u--input placeholder="请输入测评人员" border="surround" v-model="item.checkName"
							:disabled="item.isCheckName">
						</u--input>
					</u-row> -->

					<!-- <u-row customStyle="margin: 10rpx 0;padding: 0 20rpx;">
						<u-col span="6">
							<view style="display: flex;align-items: center;">
								<view>确认检测：</view>
								<view>
									<u-switch v-model="item.isCheckName" :disabled="item.isCheckName" asyncChange
										@change="asyncChange(item)" activeColor="#3953b8">
									</u-switch>
								</view>
							</view>
						</u-col>
						<u-col span="3">
							<view>
								<u-button text="详情" @click="openClick(item)"></u-button>
							</view>
						</u-col>
						<u-col span="3">
							<view>
								<u-button text="评论" @click="commentClick(item)"></u-button>
							</view>
						</u-col>
					</u-row> -->

				</view>
			</view>

			<!-- 图片弹出层 -->
			<!-- <u-popup :show="show" @close="close">
					<view class="img">
						<image :src="item" mode="widthFix" v-for="(item,index) in imgList" :key="index"></image>
					</view>
			</u-popup> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				// 搜索
				search: '',
				optionI: 1,
				size: 10,
				pageIndex: 1,
				option: [{
						name: '未检测',
						i: 1
					},
					{
						name: '已完成',
						i: 2
					},
					{
						name: '退款',
						i: 3
					},
				],
				//弹出层
				show: false,
				order: [],
				imgList: [],
				timer: '',

				currentList: null,
				radiolist: ['未通过', '已通过']
			};
		},
		methods: {
			// 搜索输入框
			input(e) {
				this.search = e.detail.value
				this.page = 1
				this.getList({
					state: this.optionI,
					size: this.size,
					pageIndex: this.pageIndex,
					model: this.search
				})
			},
			optionClick(i) {
				this.page = 1
				this.optionI = i
				this.getList({
						state: this.optionI,
						size: this.size,
						pageIndex: this.pageIndex,
						model: this.search
				});
				this.gotop()
			},
			// 关闭弹出层
			close() {
				this.show = false
			},

			// 去图片详情
			openClick(i) {
				uni.navigateTo({
					url: `/pagesA/pages/image/image?i=${JSON.stringify(i)}`
				})
			},
			// 回到顶部
			gotop() {
				uni.pageScrollTo({
					scrollTop: 0, //返回到0rpx的位置
					duration: 200 //动画过度200ms
				})
			},
			//确认开关
			asyncChange(e) {
				const _that = this
				if (e.checkState === null) {
					uni.showToast({
						title: '检测结果未选择！！',
						duration: 2000,
						icon: 'error'
					});
				} else if (!e.checkName) {
					uni.showToast({
						title: '测评人员未填写！！',
						duration: 2000,
						icon: 'error'
					});
				} else {
					uni.showModal({
						content: e ? '确定要打开吗？打开之后将不能关闭，测评人员将不可修改！！' : '确定要关闭吗',
						success: (res) => {
							if (res.confirm) {
								// 确认锁定 锁定测评人员输入框 且 不能修改switch状态
								new Promise((resolve) => {
									_that.lock({
											orderNo: e.orderNo,
											checkName: e.checkName,
											checkState: e.checkState
										}),
										resolve();
								}).then((_) => {
									setTimeout(() => {
										_that.getList({
											state: _that.optionI,
											pageIndex: _that.pageIndex,
											size: _that.size,
											model: _that.search
										})
									}, 50)
								});
							}
						}
					})
				}
			},
			// 评论
			commentClick(item) {
				uni.navigateTo({
					url: `/pagesA/pages/comment/comment?i=${item.orderNo}`
				})
			},
			// 获取列表
			getList(obj) {
				uni.showLoading({
					title: '加载中',
				});
				const _that = this
				uni.request({
					url: 'https://wechat.atptest.com:44387/api/PCApplet/OrderList_Query',
					method: 'GET',
					data: obj,
					success(res) {
						if (res.data.data) {
							_that.order = res.data.data.items
						} else {
							_that.order = []
						}
						_that.timer = setTimeout(() => {
							uni.hideLoading();
						}, 50)
					}
				})
			},
			// 锁定检测人员
			lock(obj) {
				uni.request({
					url: 'https://wechat.atptest.com:44387/api/PCApplet/UpdateCheckName_Admin',
					method: 'GET',
					data: obj,
					success(res) {
						// this.getList({
						// 	state: this.optionI,
						// 	pageIndex: this.pageIndex,
						// 	size: this.size,
						// 	model : this.search
						// })
					}
				})
			},

			copClick(item, index) {
				if (item.isCheckName) {
					uni.showToast({
						title: '订单已完成检测！！',
						duration: 2000,
						icon: 'error'
					});
					return
				}
				this.order.forEach((it) => {
					if (it.orderNo == item.orderNo) {
						it.checkState = index
					}
				})
			},
		},


		// 下拉加载
		onReachBottom() {
			uni.showLoading({
				title: '加载中',
			});
			this.page++
			const _that = this

			const obj = {
				state: this.optionI,
				size: this.size,
				pageIndex: this.page,
				model: this.search
			}

			uni.request({
				url: 'https://wechat.atptest.com:44387/api/PCApplet/OrderList_Query',
				method: 'GET',
				data: obj,
				success(res) {
					if (res.data.data) {
						_that.order = _that.order.concat(res.data.data.items)
					} else {
						// _that.order = []
						uni.showToast({
							title: '数据加载完毕！！',
							duration: 2000,
						});
					};
					_that.timer = setTimeout(() => {
						uni.hideLoading();
					}, 50)
				}
			})
		},
		onLoad: function(option) {
			this.getList({
				state: this.optionI,
				size: this.size,
				pageIndex: this.pageIndex,
				model: this.search
			})
		},
		onUnload() {
			clearTimeout(this.timer);
		}
	}
</script>

<style lang="scss" scoped>
	.admin {
		background-color: #f5f5f5;

		.top {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 99;

			.search {
				// height: 90rpx;
				padding: 0 20rpx;
				background-color: #fff;
			}

			.option {
				display: flex;
				justify-content: space-around;
				align-items: center;
				background-color: #fff;
				color: #7d7e7f;
			}
		}

		.bottom {
			padding-top: 140rpx;
			box-sizing: border-box;

			.order {
				margin: 20rpx 20rpx 0;
				background-color: #fff;
				padding: 10rpx;
				border-radius: 10px;

				.radiolist {
					border: 1px solid #ccc;
					border-radius: 10rpx;
					padding: 5rpx 10rpx;
					margin: 0 5rpx;
				}

				.active {
					border: 1px solid #309521;
					background-color: #309521 !important;
					color: #fff;
				}

				.activeRed {
					border: 1px solid #e56564;
					background-color: #e56564 !important;
					color: #fff;
				}
			}
		}

		.nagetive {
			border-bottom: 3px solid #3b53b7;
			color: #000;
		}

	}

	/deep/ .u-cell__body {
		padding: 4rpx 20rpx !important;
	}

	/deep/ .u-button--info {
		background-color: #3953b8 !important;
		color: #fff !important;
	}

	/deep/ .u-cell__value {
		width: 500rpx;
	}

	/deep/ .u-input {
		padding: 0 !important;
	}

	/deep/ .u-input__content {
		height: 32rpx;
		width: 50rpx;
	}

	/deep/ .u-input__content__field-wrapper__field {
		font-size: 12px !important;
	}

	/deep/ .u-switch {
		height: 45rpx !important;
	}

	/deep/ .u-button {
		height: 50rpx !important;
	}

	/deep/ .u-row {
		padding: 10rpx 20rpx;
	}
</style>